<template>
  <div class="loginWrap p_relative">
    <div class="login_banner d-flex justify-content-center align-items-center p_relative">
      <img src="~static/image/login_logo.png" width="205" height="58">
      <h1 class="ml-2">瑞斯康智慧照明管理平台</h1>
    </div>
    <div class="user_form">
      <ul class="w-100 h-100 loginBorder p_absolute">
        <li class="p_absolute" v-for="index in 4"></li>
      </ul>
      <div class="user_form_body p_relative" >
        <h2>用户登录</h2>
        <div class="el-input__wrap p_relative">
          <i class="icon icon-user"></i>
          <el-input ref="inputName" v-model="form.username" placeholder="用户名" :readonly="isReadOnly"  @focus="focusInput"></el-input>
        </div>
        <div class="el-input__wrap p_relative">
          <i class="icon icon-pwd"></i>
          <el-input type="password" v-model="form.pwd" placeholder="密码" :readonly="isReadOnly"  @focus="focusInput"></el-input>
        </div>
        <div class="d-flex justify-content-between">
          <div class="el-input__wrap p_relative w250">
            <i class="iconfont icon-yanzhengma font24" style="margin-top: -12px;"></i>
            <el-input v-model="form.code" placeholder="校验码" :readonly="isReadOnly"  @focus="focusInput"></el-input>
          </div>
          <img :src="codeImg" style="height: 50px;" @click="getCodeImg">
        </div>

        <div class="d-flex justify-content-between">
          <label>
            <el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
          </label>
          <label class="txt_blue6 font16">忘记密码</label>
        </div>
        <el-button class="ur-btn loginBtn" @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import api from 'api/api'
  export default {
    components: {},
    props: {},
    data() {
      return {
        form:{pwd:'',name:''},
        rememberPwd:false,
        isReadOnly:true,
        codeImg:'',
        guid:''
      }
    },
    watch: {},
    computed: {},
    methods: {
      getCodeImg(){
        this.guid=api.guid()
        this.codeImg=api.ajaxServe + 'User/VerifyCode?guid=' + this.guid;
      },
      focusInput() {
        this.isReadOnly = false;
      },
      login(){
        api.fetchSimple('/User/Login',{guid:this.guid,...this.form}).then(r=>{
          if(r==''){
            return this.getCodeImg()
          }else{
            // let r=res.data
            this.$store.commit('user/SET_USER_TOKEN', r.token)
            this.$store.commit('user/SET_USER_INFO', {userName:r.userName,roleId:r.roleId,limits:r.rights})
            this.$router.push('/main')
          }
        })
      },
    },
    created() {
      this.getCodeImg()
    },
    mounted() {
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  .loginWrap {width: 100%;height:100%; background: url('~assets/image/login/login_bg.png') repeat;color :#fff;padding:100px 0 0;
    .login_banner{
      &::after{position:fixed;top:5px;content:url("~assets/image/login/guang.png");}
      h1{font-size:54px;letter-spacing:5px;ext-shadow: 6px 6px 8px 0px rgba(0,0,0,0.3);position:relative;z-index:2;}
    }
    .user_form{position:fixed;top:50%;margin-top:-215px;right:70px;width:499px;height:484px;text-align:center;background: rgba(0, 184, 255, 0.1);
      h2{font-size:38px;letter-spacing:1px;font-weight:500;margin-bottom:30px;}
      .loginBorder li{width:39px;height:38px;
        &:nth-child(1){top:0;left:0;background: url("~assets/image/login/b_tl.png") no-repeat;}
        &:nth-child(2){right:0;top:0;background: url("~assets/image/login/b_tr.png") no-repeat;}
        &:nth-child(3){left:0;bottom:0;background: url("~assets/image/login/b_bl.png") no-repeat;}
        &:nth-child(4){right:0;bottom:0;background: url("~assets/image/login/b_br.png") no-repeat;}
      }
      .user_form_body{width:403px;height:380px;margin:-200px auto 0;top:50%;
        .el-checkbox__inner{
            background:transparent;
          }
        .el-checkbox__label{
          font-size:16px;color:#fff;
        }
      }
      .el-input__wrap{margin-bottom:20px;
        i{
          position :absolute;z-index:10;top:50%;left:22px;
        }
      }
      .el-input__inner{background: rgba(0, 75, 119, 0.6) !important;height:50px;
        line-height:50px;color:#fff;font-size:20px;font-weight:400; text-indent :70px;}
      .icon-user{width: 21px;height: 23px;background: url("~assets/image/login/user.png") no-repeat; margin-top:-11px;}
      .icon-pwd{width: 22px;height: 26px;background: url("~assets/image/login/pwd.png") no-repeat;margin-top:-13px;}
    }
    .loginBtn{width:403px;height:56px;line-height:56px;margin-top:40px;background: url("~assets/image/login/login_btn.png") no-repeat;
      span{font-size:26px;}
    }
    input::-webkit-input-placeholder {color: #fff !important;}
  }
</style>
